<template>
	<view class="myInfo">
		<!--<z-nav-bar>个人信息</z-nav-bar>-->
		<!-- 公共组件-每个页面必须引入 -->
		<!--<public-module></public-module>-->
		<view class="forms">
			<uni-forms :modelValue="formData" :value="formData" ref="form" :rules="rules">
				<uni-forms-item label="姓名" name="studentName">
					<uni-easyinput type="text" v-model="formData.studentName" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="手机" name="cellNo">
					<uni-easyinput type="text" v-model="formData.cellNo" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item required label="QQ" name="qqNo">
					<uni-easyinput type="text" v-model="formData.qqNo" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item required label="在读学校" name="schoolId">
					<view class="select" @click="onPageJump('school')">{{formData.schoolId}}
						<uni-icons type="arrowright" size="16"></uni-icons>
					</view>
				</uni-forms-item>
				<uni-forms-item label="院系" name="collegeId">
					<view class="select" @click="onPageJump('major')">{{formData.collegeId}}
						<uni-icons type="arrowright" size="16"></uni-icons>
					</view>
				</uni-forms-item>
				<uni-forms-item label="专业" name="majorId">
					<view class="select" @click="onPageJump('profession')">{{formData.majorId}}
						<uni-icons type="arrowright" size="16"></uni-icons>
					</view>
				</uni-forms-item>
				<uni-forms-item label="年级" name="grade">
					<view class="select" @click="onPageJump('grade')">{{formData.grade}}
						<uni-icons type="arrowright" size="16"></uni-icons>
					</view>
				</uni-forms-item>
				<uni-forms-item label="班级" name="className">
					<uni-easyinput type="text" v-model="formData.className" placeholder="请输入" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<button type="primary" form-type="submit" class="btn" @click="submitForm">保存</button>
	</view>
</template>

<script>
	import store from '@/store';
	
	export default {
		components: {

		},
		data() {
			return {
				formData: {
					name: '',
					phone: '',
					QQ: '',
					school: '请选择',
					major: '请选择',
					grade: '请选择',
					profession: '',
					class: '',
				},
				rules: {
					studentName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						},
						// {
						// 	validateFunction:function(rule, value, data, callback) {
						// 		let iphoneReg = /^1[0-9]{10}$/
						// 		if (!iphoneReg.test(value)) {
						// 			callback('手机号码格式不正确，请重新填写')
						// 		}
						// 		return true
						// 	}
						// },
						]
					}
				}
			};
		},
		onLoad() {
			this.formData = store.state.userDetail
			if(!this.formData) {
				// nvue页面读取不到vuex里面数据，将取缓存
				this.formData = uni.getStorageInfoSync("userDetail");
			}
			//console.log(JSON.stringify(this.formData))
		},
		onShow() {

		},
		//方法
		methods: {
			onPageJump(url) {
				// console.log(type)
				uni.navigateTo({
					url: '/subpages/my/search?params=' + encodeURIComponent(JSON.stringify(this.formData))
				});
			},
			submitForm(form) {
				// 手动提交表单
				this.$refs.form.submit().then((res) => {
					console.log('表单返回得值：', res)
				})
			},
		},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss">
	@import '@/style/mixin.scss';

	page {
		background-color: $uni-bg-color-grey;
	}

	.myInfo {
		position: relative;
		height: 100%;
		width: 100%;
		padding: 16px;
		box-sizing: border-box;
	}

	.forms {
		width: 686upx;
		margin: 0 auto;
		padding: 24px 16px;
		background: #FEFFFF;
		border-radius: 16px;

		/deep/ input {
			text-align: right;
			outline: none;
		}

		/deep/ .is-input-border {
			border: 0 !important;
		}

		.select {
			width: 100%;
			text-align: right;
			line-height: 72upx;
		}
	}

	.btn {
		background-color: $uni-theme-color;
		border-radius: 30px;
		margin-top: 36upx;
	}

	.screenfull {
		position: absolute;
		background: #fff;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 3;
	}
	/deep/ .input-value-border{
		border:0;
	}
</style>
